<template>
  <div class="box">
    <span
      class="text"
      :style="{
        color: props.type ? '' : props.color,
        fontWeight: props.size === 'large' ? '900' : '300',
        fontSize: font_size + 'px',
        backgroundImage: props.link
          ? ''
          : `linear-gradient(to right, var(--${props.type ?? 'dark'}))`,
      }"
      :class="[
        props.type,
        props.highlight ? 'highlight' : '',
        props.link ? 'link underline' : 'underline_ani',
      ]"
    >
      <slot>{{ props.text }}</slot>
    </span>
  </div>
</template>

<script lang="ts">
import { defineComponent, type App } from "vue";
export default defineComponent({
  name: "Emo-Text",
  install(app: App) {
    app.component("Emo-Text", this);
  },
});
</script>
<script setup lang="ts">
import { type ThemeType, type SizeType, FontSizeEnum } from "@/type";
import { computed } from "vue";

interface PropsType {
  text: string;
  type?: ThemeType;
  size?: SizeType;
  width?: number | string;
  height?: number | string;
  color?: string;
  link?: boolean;
  highlight?: boolean;
}

const props = withDefaults(defineProps<PropsType>(), {
  text: "这是文本片段",
  type: null as ThemeType,
  size: "middle" as SizeType,
  width: "100%",
  height: "100%",
  color: "#000",
  link: false,
  highlight: false,
});
// 渲染数据
const font_size = computed(() => {
  const size = FontSizeEnum[props.size];
  return size ? size : FontSizeEnum.middle;
});
// 点击处理函数
const handleClick = () => {
  console.log("文本被点击");
};
// link与highlight处理
// const linkStyle = computed(() => {
//   if(props.link && props.highlight){
//     return "link underline"
//   }
//   if(props.link && !props.highlight)
// });
</script>

<style scoped lang="scss">
.text {
}
.underline {
  cursor: pointer;
  background-repeat: no-repeat;
  background-size: 100% 2px;
  background-position: right bottom;
}
.underline_ani {
  background-size: 0 2px;
  background-repeat: no-repeat;
  background-position: right bottom;
  transition: background-size 0.2s;
  &:hover {
    background-size: 100% 2px;
    background-position: left bottom;
  }
}
.highlight {
  background-color: #a92b2b;
  // background-size: 100% 100%;
  // background-repeat: no-repeat;
  // // background-image: linear-gradient(to right, var(--primary));
  // background-position: right bottom;
}
.link {
  // text-decoration: underline;
  position: relative;
  // &:hover {
  //   color: var(--gray_light);
  // }
  &:hover::before {
    content: "";
    position: absolute;
    top: 5%;
    left: 0;
    background: var(--gray_light);
    opacity: 0.7;
    transform: scale(1.1);
    border-radius: 5px;
    width: 100%;
    height: 100%;
  }
  &:hover::after {
    content: "🔗";
    position: absolute;
    top: 0%;
    left: 50%;
    transform: scale(1.2);
    width: 100%;
    height: 100%;
  }
}
.primary {
  color: var(--primary);
}
.success {
  color: var(--success);
}
.warning {
  color: var(--warning);
}
.danger {
  color: var(--danger);
}
.info {
  color: var(--info);
}
</style>
